<template>
  <div class="page-container">
    <div class="page-tool-bar">
      <div class="page-tool-container bid-flex">
        <curLocation />
      </div>
    </div>
    <div class="bid-notice-container bid-flex">
      <div class="nav-side">
        <p>协会动态</p>
        <p class="active">招投标动态</p>
        <p>政府采购动态</p>
        <p>公共资源交易平台动态</p>
      </div>
      <div class="notice-list-wrap">
        <div class="activity-list-container">
          <div class="a-list-item bid-flex" v-for="item in 10" :key="item">
            <p class="a-item-title">{{ noticeTitle }}</p>
            <p class="a-item-time">{{ noticeTime }}</p>
          </div>
        </div>
        <div class="pagination-wrap">
          <p>上一页</p>
          <p>1</p>
          <p class="active">2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
          <p>下一页</p>
          <p>前往 页</p>
          <p>尾页</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import curLocation from "../components/current-location.vue";
export default {
  name: "industry-trends",
  components: {
    curLocation
  },
  data() {
    return {
      noticeTitle: "中招协组织集体收看庆祝中国共产党成立100周年大会",
      noticeTime: "2021-06-05"
    };
  },
  methods: {}
};
</script>
<style scoped>
.page-tool-container {
  margin: 0.2rem 0;
  justify-content: space-between;
}

.notice-list-wrap {
  margin-left: 0.2rem;
  flex: 2;
}

.nav-side {
  width: 2.08rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-side p {
  display: inline-block;
  width: inherit;
  height: 0.52rem;
  text-align: center;
  line-height: 0.52rem;
  font-size: 0.16rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #fff;
  border: 0.01rem solid #ddd;
  box-sizing: border-box;
}

.nav-side p.active {
  color: #fff;
  border-color: #1571ba;
  background-color: #1571ba;
}

.notice-list-wrap {
  margin-left: 0.2rem;
  flex: 2;
}

.activity-list-container {
  border: 0.01rem solid #ddd;
}

.a-list-item {
  justify-content: space-between;
  font-size: 0.16rem;
  padding: 0.15rem 0.1rem;
  line-height: 0.22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 0.01rem solid #ddd;
}

.activity-list-container .a-list-item:last-child {
  border-bottom: none;
}

.a-item-title {
  width: 7.68rem;
}

.a-item-time {
  color: #999;
}

.pagination-wrap {
  margin-top: 0.5rem;
  text-align: center;
}

.pagination-wrap p {
  display: inline-block;
  padding: 0.1rem 0.15rem;
  font-size: 0.14rem;
  color: #666;
  background-color: #f9f9f9;
  border: 0.01rem solid #e4e4e4;
  border-radius: 0.03rem;
}

.pagination-wrap p.active {
  color: #fff;
  background-color: #1571ba;
}
</style>
